致胜优势INFO
联系我们CONTACT

公司地址：茂名市人民南路新村大院22号101

电话：13592986386

vue element ui 学习日志您当前的位置：首页 > vue element ui 学习日志

vue element ui 学习日志

发布时间：2024/9/5 15:30:55

一、什么是mounted方法？

1、生命周期钩子函数：Vue的生命周期钩子函数是在不同阶段执行的一系列回调函数。mounted方法是其中之一，它在Vue实例被挂载到真实的DOM元素后被调用。


2、挂载到DOM元素：当Vue实例被创建后，通过el属性指定的DOM元素会被Vue所管理。mounted方法表示Vue实例已经成功地与DOM元素进行了绑定。

二、mounted方法的执行时机

1、DOM元素渲染完成后：在Vue实例的生命周期中，mounted方法在beforeMount方法之后被调用。这意味着在mounted方法中可以安全地访问和操作DOM元素，因为此时DOM已经完全渲染。

2、仅触发一次：mounted方法只会在Vue实例的初始化过程中触发一次。一旦被调用，便表示Vue实例已经被完全加载并挂载到DOM元素上。


‌在PyCharm中复制过来的Vue.js插件是可以使用的，包括进行调试。‌


<template>

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

</template>


:gutter="20" 间隔
:span="6" 一行分为24份  该代码占6份